<template>
  <div>
    <div class="w-full flex justify-between items-center px-2 pt-1 cursor-pointer [-webkit-app-region:drag]">
      <div>
        <slot></slot>
      </div>
      <div
        :class="fontColor"
        class="flex flex-row justify-end gap-5 text-fontPrimary backdrop:blur-sm [-webkit-app-region:no-drag]"
      >
        <i v-if="mini" class="iconfont icon-zuixiaohua" @click="Mini"></i>
        <i v-if="full" class="iconfont icon-zuidahua" @click="Full"></i>
        <i class="iconfont icon-guanbi" @click="IsShowCloseDialog"></i>
      </div>
    </div>
    <n-modal v-model:show="dialogVisible">
      <div class="w-[300px] p-3 bg-Center rounded flex flex-col gap-3 text-xs">
        <div class="text-base mb-2">最小化还是直接关闭程序？</div>
        <n-radio-group v-model:value="WindowTabCloseType" name="radiogroup">
          <n-space>
            <n-radio key="mini" value="mini">最小化到托盘</n-radio>
            <n-radio key="close" value="close">直接关闭</n-radio>
          </n-space>
        </n-radio-group>
        <div class="flex flex-row items-center justify-end gap-1 my-3">
          <n-checkbox v-model:checked="IsRememberExitType" />
          <span class="text-[10px]">下次不再出现该提示: </span>
        </div>
        <div class="text-end">
          <n-button @click="dialogVisible = false">取消</n-button>
          <n-button type="success" @click="Quit">确认</n-button>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useSystem } from "@/store/modules/system";
import { RemoveAllCache } from "@/utils/common";
import { NButton, NCheckbox, NModal, NRadio, NRadioGroup, NSpace } from "naive-ui";

let { IsRememberExitType, WindowTabCloseType } = storeToRefs(useSystem());
let dialogVisible = ref<boolean>(false);
const props = withDefaults(
  defineProps<{
    obj?: string;
    mini?: boolean;
    full?: boolean;
    slotDrag?: boolean;
    fontColor?: string;
    closeCallback?: () => void;
  }>(),
  {
    obj: "home",
    mini: true,
    full: true,
    slotDrag: false,
    fontColor: "text-fontPrimary",
    closeCallback: () => {},
  },
);

function IsShowCloseDialog() {
  // 如果是其他页面 直接退出 不用询问是否最小化
  if (IsRememberExitType.value || props.obj != "home") Quit();
  else dialogVisible.value = true;
}

// 退出
function Quit() {
  // 如果是home 直接清除缓存 关闭ws
  if (props.obj === "home") {
    RemoveAllCache();
    window.electronApi.closeWs();
  } else {
    props.closeCallback?.();
  }
  window.electronApi.controlTabBar({
    obj: props.obj,
    type: WindowTabCloseType.value,
  });
}

// 最小化
function Mini() {
  window.electronApi.controlTabBar({
    obj: props.obj,
    type: "mini",
  });
}

// 全屏
function Full() {
  window.electronApi.controlTabBar({
    obj: props.obj,
    type: "full",
  });
}
</script>

<style lang="scss" scoped>
.window-tab-nav {
  width: 100%;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  -webkit-app-region: drag;
}
</style>
